﻿/* globals & resets */
body {
	background: #300A02;
	color: #FFF;
	font-family: arial,helvetica,sans-serif; /*'Bangers'*/
	margin: 10px 0;
	text-align: center;
}
article, aside, figure, footer, header, nav, section, ul,
h1, h2, h3, h4, h5, h6 {
	display: block;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

#wrapper {
	background: #55A912;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#55A912',endColorstr='#552A15');
	background: -moz-linear-gradient(top center,#55A912,#552A15);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#55A912),to(#552A15));
	/*end gradient*/
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
	margin: auto;
	height: 520px;
	text-align: left;
	width: 950px;
}

#scene {
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
	background: #D0CCC7;
	background-image: url(../images/back.jpg?v=0);
	background-repeat: no-repeat;
	clear: both;
	float: left;
	height: 500px;
	margin: 10px;
	overflow: hidden;
	width: 720px;
}

/* builder */
#builder {
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
	background: #765A3A;
	float: left;
	margin-top: 10px;
	padding: 10px;
	height: 480px;
	width: 180px;
}
h1 {
	font-size: 24px;
	font-weight: bold;
	text-transform: uppercase;
}
#builder h2 {
	clear: both;
	font-size: 17px;
	font-weight: bold;
	margin: 10px 0 4px 0;
}

/* colors */
.red { background-color: #B50909; }
.green { background-color: #0E5901; }
.purple { background-color: #691286; }
.blue { background-color: #069; }
.yellow { background-color: #F4CC28; }
.pink { background-color: #E635CB; }

#colors {
	height: 30px;
	margin-bottom: 10px;
}
#colors li {
	border: 1px solid #666;
	border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
	box-shadow:0px 2px 3px #333;-moz-box-shadow:0px 2px 3px #333;-webkit-box-shadow:0px 2px 3px #333;
	cursor: pointer;
	display: block;
	float: left;
	list-style: none;
	margin-right: 1px;
	height: 27px;
	width: 27px;
}

/* parts */
#parts {
	background: #666;
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
	box-shadow:0px 2px 5px #333;-moz-box-shadow:0px 2px 5px #333;-webkit-box-shadow:0px 2px 5px #333;
	clear: both;
	height: 190px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
}
#parts li {
	background-repeat: no-repeat;
	border: 1px solid #FFF;
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
	cursor: pointer;
	display: block;
	float: left;
	list-style: none;
	margin: 3px 0 0 3px;
	height: 75px;
	width: 75px;
}

#parts li.body { background-image: url(../images/icon_body.png?v=0); }
#parts li.head { background-image: url(../images/icon_head.png?v=0); }
#parts li.arms { background-image: url(../images/icon_arm.png?v=0); }
#parts li.legs { background-image: url(../images/icon_leg.png?v=0); }
#parts li.tail { background-image: url(../images/icon_tail.png?v=0); }

#actions {
	background: #666;
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
	box-shadow:0px 2px 5px #333;-moz-box-shadow:0px 2px 5px #333;-webkit-box-shadow:0px 2px 5px #333;
	clear: both;
	height: 50px;
	padding: 5px 0 3px 0;
}
#actions li {
	color: #6F0;
	cursor: pointer;
	display: block;
	float: left;
	font-size: 18px;
	font-weight: bold;
	list-style: none;
	margin: 0 0 5px 10px;
	text-align: center;
	text-shadow:#333 1px 1px 2px;
	width: 75px;
}

#speech input {
	background: #666;
	border: 2px solid #999;
	border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
	box-shadow:0px 2px 5px #333;-moz-box-shadow:0px 2px 5px #333;-webkit-box-shadow:0px 2px 5px #333;
	color: #6F0;
	width: 180px;
}